<template>
  <div class="app-container" id="app">
    <!-- <h1>App根组件</h1> -->

    <!-- 只要在项目中安装和配置了 vue-router，就可以使用 router-link 来替代普通的 a 连接了 -->
    <!-- 作用：跳转连接，等同于  <a href="#/home">首页</a> -->
    <!-- <router-link to="/home">首页</router-link> -->

    <!-- 动态路由 -->
    <!-- 注意1：在 hash 地址中，/ 后面的参数项，叫做“路径参数” -->
    <!-- 在路由“参数对象”中，需要使用 this.$route.params 来访问路径参数 -->
    <!-- 注意2：在 hash 地址中，? 后面的参数项，叫做“查询参数” -->
    <!-- 在路由“参数对象”中，需要使用 this.$route.query 来访问查询参数 -->
    <!-- 注意3：在 this.$route 中，path 只是部分路径，fullPath 是完整的地址 -->
    <!-- 例如：fullPath: "/movie/2?name=qq" path: "/movie/2" -->
    <!-- <router-l@/components/MyHome.vue</router-link>
    <router-link to="/movie/2?name=qq">雷神</router-link>
    <router-link to="/movie/3">复联</router-link>

    <router-link to="/about">关于</router-link>

    <hr /> -->

    <!-- 只要在项目中安装和配置了 vue-router，就可以使用 router-view 这个组件了 -->
    <!-- 作用：占位符 -->
    <router-view></router-view>
  </div>
</template>

<style lang="less" scoped>
.app-container {
  a {
    color: blue;
    margin-right: 10px;
  }
}
</style>
